<!doctype html>
<html ng-app="baseDirective">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="base.css" />
  <script type="text/javascript">
    const clientId = 'crcement2022_cidc_crsems-bpm'
    window.__ctx = 'http://agile-bpm-crcement2022-cidc.crsemssn-uat.crc.com.cn/api/bpm'
    window.sessionStorage.setItem('client_id', clientId)
    let cookies = document.cookie.split(';')
    let RLToken = cookies.find(ele=>/^RL-Token=.+/.test(ele.trim()))
    let RLTokenValue  = RLToken.trim().substring(9)
    window.sessionStorage[clientId + '_token'] = RLTokenValue
  </script>
  <script type="text/javascript" src="base.js"></script>
  <script type="text/javascript" src="ngEdit.js"></script>
  <script type="text/javascript" src="flowImage.js"></script>
  <script type="text/javascript">
    window.__ctx = 'http://agile-bpm-crcement2022-cidc.crsemssn-uat.crc.com.cn/api/bpm'
  </script>
  <script type="text/javascript">
    var controller = ['$scope', 'baseService', function (scope, baseService) {
      window.baseService = baseService;
      var instanceId, defId, taskId, baseUrl;
      try {
        instanceId = window.passData.instanceId;
        defId = window.passData.defId;
        taskId = window.passData.taskId;
        baseUrl = decodeURIComponent(window.passData.baseUrl);
      } catch (e) {
        instanceId = $.getParam('instanceId');
        defId = $.getParam('defId');
        taskId = $.getParam('taskId');
        baseUrl = decodeURIComponent($.getParam('baseUrl'));
      }
      if (!taskId) {
        taskId = "";
      }
      //	scope.imageUrl =  __ctx + "/bpm/instance/flowImage?instId=" + instanceId + "&defId=" + defId + "&taskId=" + taskId;
      $("#flowImnage").attr("src", __ctx + "/bpm/instance/flowImage?instId=" + instanceId + "&defId=" + defId + "&taskId=" + taskId);

      $("#flowImnage").attr("src",);
      var defer = baseService.post(baseUrl+"/agile/bpm/getInstanceAndChildren?instanceId="+instanceId, {});
      $.getResultData(defer, function (data) {
        scope.bpmInstance = data.bpmInstance;
        scope.bpmInstanceChildren = data.bpmInstanceChildren;
      })

      scope.showImage = function (id, title) {
        var conf = {
          title: title || "查看流程图",
          url: "/bpm/instance/instanceImageDialog.html?openedFlag=true&instanceId=" + id + "&taskId=" + taskId,
          height: '95%',
          width: '80%',
          passData: null,
          topOpen: false
        };
        conf.ok = function (index, innerWindow) {
          $.Dialog.close(innerWindow);
        }
        $.Dialog.open(conf);
      }

      scope.getStyle = function (layout) {
        // ie11只支持ng-style json对象.
        // return "position:absolute;left:"+(layout.x-3)+"px;top:"+(layout.y+15)+"px;width:"+(layout.width)+"px;height:"+(layout.height)+"px;border-radius:5px;";
        return {
          "position": "absolute",
          "left": (layout.x - layout.domxoffset) + "px",
          "top": (layout.y - layout.domyoffset) + "px",
          "width": (layout.width) + "px",
          "height": (layout.height) + "px",
          "border-radiu": "5px",
        }
      }

      if ($.getParam('openedFlag')) {
        scope.canotOpen = true;
      }

      //获取流程节点坐标
      var defer1 = baseService.post(baseUrl+"/agile/bpm/getFlowImageInfo?instanceId="+instanceId+"&taskId="+taskId);

      $.getResultData(defer1, function (data) {
        scope.imageInfo = data;

        var flowImageCanvas = new flowCanvas(scope, "flowImageCanvas", scope.imageInfo);
        var drawFn = flowImageCanvas.initDraw();
        drawFn.drawFlowImage(); // 重构后的代码
        scope.clickNode = function (params) {
          drawFn.clickNode(params);
        }

        /*  initCanvas(data); 重构前的代码*/
      })


      scope.opinionConfig = {
        awaiting_check: { name: '待审批', color: "#ed4014", icon: "fa-spinner fa-pulse" },
        agree: { name: '同意', color: "#19be6b", icon: "fa-check-circle" },
        oppose: { name: '反对', color: "#ff9900", icon: "fa-close" },
        abandon: { name: '弃权', icon: "fa-unlink", color: "#808695" },
        reject: { name: '驳回', icon: "fa-reply", color: "#ff9900" },
        rejectToStart: { name: '驳回到发起人', icon: "fa-reply-all", color: "#ff9900" },
        revoke: { name: '撤销', icon: "fa-stop", color: "#ed4014" },
        recall: { name: '撤回', icon: "fa-reply", color: "#ff9900" },
        revoker_to_start: { name: '撤回到发起人', icon: "fa-reply-all", color: "#ff9900" },
        signPass: { name: '会签通过', icon: "fa-check-circle", color: "#3c763d" },
        signNotPass: { name: '会签反对', icon: "fa-close", color: "#ed4014" },
        signRecycle: { name: '会签回收', icon: "fa-check-circle", color: "#3c763d" },
        skip: { name: '跳过执行', icon: "fa-arrow-circle-right", color: "#3c763d" },
        manualEnd: { name: '人工终止', icon: "fa-stop", color: "#ed4014" },
        cancelled: { name: '任务取消', icon: "fa-arrow-circle-right", color: "#808695" },
        carbonCopy: { name: '抄送审阅', color: "#19be6b", icon: "fa-check-circle" },
        recycle: { name: '任务回收', icon: "fa-reply", color: "#ff9900" },
      }

      scope.assignInfo = function (info) {
        if (!info) {
          return "";
        }
        var msg = "";
        angular.forEach(info.split(","), function (item) {
          if (!item) {
            return;
          }
          if (msg) {
            msg += "；";
          }
          var strs = item.split("-");
          var typeName = "";
          if (strs[0] === "user") {
            typeName = "[用户]";
          } else if (strs[0] === "role") {
            typeName = "[角色]";
          } else if (strs[0] === "group") {
            typeName = "[组]";
          } else if (strs[0] === "org") {
            typeName = "[组织]";
          } else if (strs[0] === "post") {
            typeName = "[岗位]";
            if (strs[2]) {
              return msg += typeName + strs[1] + "-" + strs[2];
            }
          } else if (strs[0] === "job") {
            typeName = "[职称]";
          }
          msg += typeName + strs[1];
        });
        return msg;
      };
      scope.getTimeLag = function (time) {
        return $.timeLag(time);
      }



    }];


    function isValidate () {
      $.Dialog.close(window);
      return false;
    }

  </script>
</head>

<body class="panel success" ng-controller="controller" style="overflow: auto;font-family: FontAwesome,sans-serif;">

  <!-- 这部分是canvas需要用到的图标 -->
  <span id="userIcon" class="hide">&#xf007;</span>
  <span id="mutiUserIcon" class="hide">&#xf0c0;</span>
  <!-- <span id="mutiInstIcon" class="hide">&#xf005;</span> -->
  <span id="mutiInstIcon" class="hide">&#xf0e8;</span>
  <span id="dynamicTaskIcon" class="hide">&#xf02c;</span>
  <span id="timerIcon" class="hide">&#xf017;</span>
  <span id="serviceIcon" class="hide">&#xf013;</span>
  <span id="removeIcon" class="hide">&#xf00d;</span>
  <span id="plusIcon" class="hide">&#xf0fe;</span>
  <span id="upIcon" class="hide">&#xf0d8;</span>
  <span id="endErrorIcon" class="hide">&#xf0f1;</span>
  <span id="boundaryErrorIcon" class="hide">&#xf0e7;</span>
  <span id="endIcon" class="hide">&#xf111;</span>
  <button ng-hide="canotOpen" class="btn btn-primary fa fa-image btn-xs"
    style="position: absolute;left: 20px;top: 20px;" ng-if="bpmInstance.parentInstId"
    ng-click="showImage(bpmInstance.parentInstId,bpmInstance.subject+'-流程图')">查看父流程图</button>
  <canvas id="flowImageCanvas"></canvas> <!-- 这是新版的canvas图片 -->
  <!-- <button ng-hide="canotOpen" class="btn btn-primary fa fa-image btn-xs" ng-repeat="instance in bpmInstanceChildren" ng-click="showImage(instance.id,instance.subject+'流程图')">查看子流程 "{{instance.subject}}" 流程图</button> -->
  <br />
  <div>
    <!-- <img id="flowImnage"> -->
    <!-- 这是旧版通过java画的图片 -->
    <div ng-repeat="(nodeId,layout) in imageInfo.nodeMap" id="node{{nodeId}}" class="flowNode pointer"
      ng-if="!layout.hideDiv" ng-click="clickNode({node:layout,fn:imageInfo.flowFn})" ng-class="layout.type"
      ng-style="getStyle(layout)">
      <div ng-repeat="opinion in imageInfo.opinionMap[nodeId]" test="{{opinion.status}}"
        ng-show="($index ===imageInfo.opinionMap[nodeId].length-1 && !opinion.signId)  ||  opinion.assignInfo==='所有会签用户'">
        <div ng-if="opinionConfig[opinion.status]" class="opinionStatus"
          ng-style="{'color':opinionConfig[opinion.status].color}">
          <span class="fa {{opinionConfig[opinion.status].icon}}"></span>
          {{opinionConfig[opinion.status].name}}
        </div>
      </div>
    </div>
  </div>
  <div style="display: none;">
    <div ng-repeat="(nodeId,layout) in imageInfo.nodeMap" id="{{nodeId}}">
      <div ng-repeat="opinion in imageInfo.opinionMap[nodeId]"
        ng-hide="opinion.assignInfo==='所有会签用户' && !opinion.approveTime "
        ng-click="clickNode({node:opinion.node,fn:imageInfo.flowFn,type:'opinion',opinion:opinion})">
        <ul class="list-group">
          <a class="list-group-item">
            <h4 class="list-group-item-heading">{{opinion.approverName}}
              <span style="margin-left: 10px;" ng-style="{'color':opinionConfig[opinion.status].color}">
                <span class="fa {{opinionConfig[opinion.status].icon}}"></span>
                {{opinionConfig[opinion.status].name}}
              </span>
            </h4>
            <p class="list-group-item-text" ng-if="opinion.status != 'awaiting_check'">
              <label>审批意见：</label>{{opinion.opinion}} <br />
              <label>操作时间：</label>{{opinion.approveTime | date:"yyyy-MM-dd HH:mm:ss"}}
              <br />
              <span ng-show="opinion.durMs"> <label>处理用时：</label>{{getTimeLag(opinion.durMs)}}</span>
            </p>
            <p class="list-group-item-text" ng-if="opinion.status == 'awaiting_check'">
              <label>任务候选人：</label>{{assignInfo(opinion.assignInfo)}}
              <br /> <label>创建时间：</label>{{opinion.createTime | date:"yyyy-MM-dd HH:mm:ss"}}
            </p>
          </a>
        </ul>
      </div>
    </div>
  </div>
  <div class="modal fade" id="flowImgModal" role="dialog" data-backdrop="static" style="overflow-y: scroll;">
    <div class="modal-dialog" style="width: 90%;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
            ng-click="imageInfo.flowFn.closeFlow()">&times;</button>
          <h4 class="modal-title f16 text-center" id="flowImgModalTitle">流程图</h4>
        </div>
        <div class="modal-body o-y-s" style="height: 500px;">
          <div class="pa">
            <div ng-repeat="opinion in selectedOpinions"
              ng-click="clickNode({node:opinion.node,fn:imageInfo.flowFn,type:'opinion',opinion:opinion})"
              class="btn mr10 btn-default pointer" ng-class="{'btn-success':opinion.id == selectedOpinion.id}">
              {{opinion.taskName + opinion.trace}}</div>
            <div ng-repeat="subInst in selectedSubInstanceList"
              ng-click="clickNode({node:imageInfo.selectNode,fn:imageInfo.flowFn,type:'subInst',subInst:subInst})"
              class="btn mr10 btn-default pointer" ng-class="{'btn-success':subInst.id == selectedSubInst.id}">
              {{subInst.defName + " - "+ subInst.createTime}}</div>
          </div>

          <div id="flowImgModalBody"></div>

          <div ng-repeat="(nodeId,layout) in subImageInfo.nodeMap" id="subnode{{nodeId}}" class="flowNode pointer"
            ng-if="!layout.hideDiv" ng-click="clickNode({node:layout,fn:subImageInfo.flowFn})" ng-class="layout.type"
            ng-style="getStyle(layout)">
            <div ng-repeat="opinion in subImageInfo.opinionMap[nodeId]"
              ng-show="$index ===subImageInfo.opinionMap[nodeId].length-1">
              <div ng-if="opinionConfig[opinion.status]" class="opinionStatus"
                ng-style="{'color':opinionConfig[opinion.status].color}">
                <span class="fa {{opinionConfig[opinion.status].icon}}"></span>
                {{opinionConfig[opinion.status].name}}
              </div>
            </div>
          </div>
          <div style="display: none;">
            <div ng-repeat="(nodeId,layout) in subImageInfo.nodeMap" id="{{subImageInfo.preId+nodeId}}">
              <div ng-repeat="opinion in subImageInfo.opinionMap[nodeId]"
                ng-hide="opinion.assignInfo==='所有会签用户' && !opinion.approveTime "
                ng-click="clickNode({node:opinion.node,fn:subImageInfo.flowFn,type:'opinion',opinion:opinion})">
                <ul class="list-group">
                  <a class="list-group-item">
                    <h4 class="list-group-item-heading">{{opinion.approverName}}
                      <span style="margin-left: 10px;" ng-style="{'color':opinionConfig[opinion.status].color}">
                        <span class="fa {{opinionConfig[opinion.status].icon}}"></span>
                        {{opinionConfig[opinion.status].name}}
                      </span>
                    </h4>
                    <p class="list-group-item-text" ng-if="opinion.status != 'awaiting_check'">
                      审批意见：{{opinion.opinion}} <br />
                      操作时间：{{opinion.approveTime | date:"yyyy-MM-dd HH:mm:ss"}}
                      <br />
                      <span ng-show="opinion.durMs"> 任务耗时：{{getTimeLag(opinion.durMs)}}</span>
                    </p>
                    <p class="list-group-item-text" ng-if="opinion.status == 'awaiting_check'">
                      任务候选人：{{assignInfo(opinion.assignInfo)}}
                      <br /> 创建时间：{{opinion.createTime | date:"yyyy-MM-dd HH:mm:ss"}}
                    </p>
                  </a>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

</html>
<style>
  .opinionStatus {
    margin-top: 6px;
    margin-left: 30px;
  }

  .qtip-content {
    min-width: 240px;
  }
</style>